<template>
  <Back />
  <div>
    <div v-if="shop && shop.id" class="p-2rem line" @click="goShop">
      <div class="font-size-1.6rem m-b-0.6rem">{{ shop.name }}</div>
      <div class="flex items-center">
        <img class="w-1.4rem h-1.4rem m-r-0.2rem" src="../../assets/images/address.png" />
        <div class="font-size:1.2rem">{{ $t('home.order.distance') }}{{ shop.distance }}</div>
      </div>
    </div>
    <div>
      <van-tabs v-model:active="active" sticky @change="change">
        <van-tab :title="$t('my.coupon.unUse')"></van-tab>
        <van-tab :title="$t('my.coupon.used')"></van-tab>
        <van-tab :title="$t('my.coupon.over')"></van-tab>
      </van-tabs>
    </div>
    <van-empty v-if="list.finished && list.data.length < 1" :description="$t('common.noData')" />
    <van-list
      v-if="!list.finished || list.data.length > 0"
      v-model:loading="list.loading"
      :finished="list.finished"
      @load="getList"
      :immediate-check="false"
    >
      <div v-for="item in list.data" :key="item.id" class="coupon">
        <div class="font-size-1.6rem m-b-0.6rem">{{ item.name }}</div>
        <div class="flex items-center">
          <van-icon name="clock-o" />
          <div class="font-size-1.2rem color-#666666 m-l-4px">{{ item.useStartTime }}-{{ item.useEndTime }}</div>
        </div>
        <div class="font-size-1.2rem color-#666666 m-t6px">{{ item.note }}</div>

        <div class="text-right m-t-10px" v-if="active == 0">
          <span class="m-r16px" v-if="item.type == 1">
            <van-button type="success" size="small" @click="given(item)">{{ $t('my.coupon.given') }}</van-button>
          </span>
          <van-button v-if="item.start" @click="use(item)" type="primary" size="small">
            {{ $t('my.coupon.use') }}
          </van-button>
          <van-button v-else disabled size="small">{{ $t('my.coupon.noUse') }}</van-button>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script setup lang="ts">
import { showConfirmDialog } from 'vant'

const { t } = useI18n()

const active = ref(0)

const { getList, list, reset } = useList(apis.api.userAssetCoupons, { type: active.value })

const shop = ref<ApiShop>({} as ApiShop)
const currCoupon = ref<ApiUserCoupon>()
const router = useRouter()

onMounted(async () => {
  const cacheShop = cache.getShop()
  if (cacheShop) {
    shop.value = cacheShop
  }
  list.loading = true
  getList()
})

const goShop = () => {
  router.push('/shop')
}

const beforeClose = (action: string) => {
  return new Promise(resolve => {
    if (action == 'confirm') {
      apis.api
        .userAssetUseMemberCoupon({ couponId: currCoupon.value!.id, shopId: shop.value.id })
        .then(d => router.replace('/take?num=' + d.orderNum))
        .finally(() => resolve(true))
    } else {
      goShop()
      resolve(true)
    }
  })
}

function use(coupon: ApiUserCoupon) {
  currCoupon.value = coupon
  if (coupon.type == 1) {
    router.push('/home/drink')
  } else {
    if (shop.value && shop.value.id) {
      showConfirmDialog({
        title: t('my.coupon.tipTitle'),
        message: t('my.coupon.tip'),
        confirmButtonText: t('my.coupon.sure'),
        cancelButtonText: t('common.cancel')
      }).then(() => {
        showConfirmDialog({
          title: t('shop.submit.confirmShop'),
          message: shop.value.name + '\n' + shop.value.distance,
          confirmButtonText: t('shop.submit.this'),
          cancelButtonText: t('shop.submit.choose'),
          beforeClose: beforeClose
        })
      })
    } else {
      showDialog({
        message: t('my.coupon.noShop'),
        confirmButtonText: t('common.sure')
      }).then(() => {
        goShop()
      })
    }
  }
}

function given(item: ApiUserCoupon) {
  router.push('/given?id=' + item.id)
}

function change() {
  reset({ type: active.value })
  getList()
}
</script>

<style lang="scss" scoped>
.coupon {
  margin: 20px 20px 0;
  border: 1px solid #3aa1a2;
  border-radius: 4px;
  padding: 20px;
}
</style>
